<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－GEO覆盖物类</title>
    <style>html,body{margin:0;padding:0}</style>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=95f0a5688ec713adb3dd1735533f6fcb"></script>
    <script src="./d3.js"></script>
    <script src="./D3Overlay.js"></script>
    <script>
    var countries = [];
    var countriesOverlay = new T.D3Overlay(init, redraw);
    function getUrlPara(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
        var r = window.location.search.substr(1).match(reg);
        if (r!=null) return (r[2]); return null;
    }
    function init(sel, transform) {
        var upd = sel.selectAll('path.geojson').data(countries);
        upd.enter()
        .append('path')
        .attr("class", "geojson")
        // .attr('stroke', 'black')
        .attr('fill', function (d, i) {
            // return d3.hsl(Math.random() * 360, 0.9, 0.5)
            return '#000000'
        })
        .attr('fill-opacity', '1');
        // .attr('fill-opacity', '0.5');
    }
    function redraw(sel, transform) {
        sel.selectAll('path.geojson').each(
            function (d, i) {
                d3.select(this).attr('d', transform.pathFromGeojson);
            }
        )
    }
    function onLoad() {
        // 添加地图
        var map = new T.Map('mapDiv');
        var zoom = getUrlPara('zoom');
        map.centerAndZoom(new T.LngLat(106.76992, 25.97901), zoom||10);
        console.log("=======", map.getBounds());
        
        var satelliteImageURL = 'http://t0.tianditu.gov.cn/ter_w/wmts?' +
            'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default' +
            '&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' +
            '&tk=95f0a5688ec713adb3dd1735533f6fcb';
        var lay = new T.TileLayer(satelliteImageURL, { minZoom: 5, maxZoom: 18 });
        map.addOverLay(lay);

        d3.json("./huishui.json", function (data) {
            countries = data.features;
            map.addOverLay(countriesOverlay);
            countriesOverlay.bringToBack();
        });

        // 添加按钮
        var tool = new T.RectangleTool(map);
        tool.addEventListener('draw', (e) => {
            console.log("=======", e.currentBounds);
        });
        function onButtonClick() {
            tool.close();
            tool.open();
        }

        function createButton(control, label, click) {
            var button = document.createElement("a");
            control.appendChild(button);
            button.innerHTML = label;
            button.style.cssText = "border-radius:8px;font-size: 18px;border:solid 2px blue;background:#fff;padding:4px;cursor:pointer;";
            button.onclick = click;
            return button;
        }

        var buttonControl = new T.Control({position: T_ANCHOR_TOP_LEFT});
        var button;
        buttonControl.onAdd = function (map) {
            var container = document.createElement("div");
            button = createButton(container, '开始', onButtonClick);
            return container;
        };
        buttonControl.onRemove = function (map) {
            delete button;
        }
        map.addControl(buttonControl);
    }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>
</body>
</html>
